<template>
	<view class="container">
		<view class="avatar">
			<!-- 上传组件 -->
			<u-upload name="product_img" :maxCount="1" :fileList="filelist" width="100" height="100" @delete="del"
				@afterRead="read" />
		</view>

		<view class="content">
			<u-form labelPosition="left" labelWidth="60" :model="addservice" :rules="rules" ref="product">
			
				<!-- 名称 -->
				<u-form-item label="标题" prop="title">
					<u-input v-model="addservice.name" ref="title" placeholder="请输入商品名称" />
				</u-form-item>

				<u-form-item label="简介" prop="content" borderBottom>
					<u-textarea placeholder="不低于3个字" v-model="addservice.content" count></u-textarea>
				</u-form-item>

			
				<!-- 全款 -->
				<u-form-item label="服务费用" prop="free">
					<u-input v-model="addservice.free" placeholder="请填写服务费用" />
				</u-form-item>
				


				
				<!-- 提交按钮 -->
				<u-button text="添加增值服务" icon="pushpin" size="small" type="success" :customStyle="btnStyle" @click="product" />
			</u-form>

		</view>
		<!-- 消息提醒 -->
		<u-toast ref="notice"></u-toast>
	</view>
</template>
  
<script>
export default {
	onLoad() {
		this.auth = this.$u.auth.check();



	},

	onReady() {

		this.$refs.product.setRules(this.rules)


	},
	created() {

		this.timer = setInterval(() => {

			let a = this.$u.count.check()

		}, 15000);

	},
	beforeDestroy() {
		clearInterval(this.timer)
	},
	data() {
		return {
			filelist: [],
			showstore: false,
			auth: {},
			addserid: 0,
			name: "",
			addservice: {
				image_text: "",
				name:"",
				free:"",
				content:""

				

			},
			piclist: [],
			rules: {
				content: {
					required: true,
					message: "不低于3个字",
					trigger: ["change"],
				},
				
				name: {
					required: true,
					message: "请填写增值服务标题",
					trigger: ["blur", "change"],
				},
				free: {

					required: true,
					message: "增值服务服务费用不能为空",
					trigger: ["blur", "change"],
				},
			
			},
		};
	},
	

	methods: {

		async read(event) {

			//组装上传数据
			var data = {
				filePath: event.file.thumb,
				name: "product_img",
				header: {},

			};

			//调用接口
			var result = await this.$u.api.product.thumbs(data);

			if (result.code) {

				this.addservice.image_text = result.data
				// 合并对象
				this.filelist = [
					{ url: result.data }
				]
				return false


			} else {
				this.$refs.notice.show({
					type: "error",
					message: result.msg,
				});
				return false;
			}
		},



		product() {
			this.$refs.product.validate().then(async () => {

				var data = {
					name: this.addservice.name,
					free: this.addservice.free,
					image: this.addservice.image_text,
					content: this.addservice.content,
				};


				let result = await this.$u.api.product.addservicesadd(data);

				if (result.code) {
					this.$refs.notice.show({
						type: "success",
						message: result.msg,
						duration: 2500,
						complete: () => {
							uni.$u.route({
								type: "reLaunch",
								url: "/pagesC/addservices/index",

							})
						}
					});
				} else {
					this.$refs.notice.show({
						type: "danger",
						message: result.msg,
						duration: 2000,

					});
				}
			})
				.catch(() => {
					uni.$u.toast("效验失败");
				});



		},
	
		async del(e) {

			let data = {
				adminid: this.auth.id,
				addserid: this.addserid,
				url: e.file.url
			}


			var result = await this.$u.api.product.delimage(data)

			if (result.code) {
				this.$refs.notice.show({
					type: "success",
					message: result.msg,
					duration: 1000,
					complete: () => {


						if (e.index == 0) {
							this.filelist.splice(e.index, e.index)

							this.filelist = []
						}

					}
				})

			} else {
				this.$refs.notice.show({
					type: "danger",
					message: result.msg,
					duration: 1000,

				}
				)
			}



		},

	


	},
};
</script>
  
<style >
.content {
	padding: 20px;
}

.container {
	height: 100%;
	margin: 0 50rpx;
	box-sizing: border-box;
}

.avatar {
	text-align: center;
}

.u-avatar {
	margin: 80rpx auto 40rpx;
}

.xcx {
	width: 200rpx;
	height: 200rpx;
	margin: 80rpx auto 40rpx;
	border-radius: 100%;
	overflow: hidden;
}

.nickname {
	font-size: 14px;
	text-align: center;
}

.title {
	text-align: center;
	margin: 40rpx 0;
	font-size: 14rpx;
}

.avatar .u-upload {
	justify-content: center;
	align-items: center;
	margin: 3em auto;
}

.vedio .u-upload {
	justify-content: center;
	align-items: center;
	margin: 0.3em auto;
}

.vedio {
	text-align: center;
}

.u-vedio {
	margin: 80rpx auto 40rpx;
}
</style>
  